<!doctype html>

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!-- <link type="text/css" rel="stylesheet" href="David_gwt.css"> -->
		<link rel="stylesheet" href="css/style.css" />

		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/jquery.isotope.min.js"></script>
		<title>Web Application Starter Project</title>

		<script type="text/javascript" src="david_gwt/david_gwt.nocache.js"></script>

	</head>
	<body>
		<noscript>
			<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
				Your web browser must have JavaScript enabled
				in order for this application to display correctly.
			</div>
		</noscript>

		<div id="header">
			
		</div>
		<section id="content">

			<section id="options" class="clearfix combo-filters">
				<div class="option-combo color">
					<ul class="filter option-set clearfix " data-filter-group="color">
						<li>
							<a href="#filter-any" data-filter-value="" class=".selected">any</a>
						</li>
						<li>
							<a href="#filter-abstract" data-filter-value=".abstract">abstract</a>
						</li>
						<li>
							<a href="#filter-profil" data-filter-value=".profil">profil</a>
						</li>
						<li>
							<a href="#filter-taj" data-filter-value=".taj">taj</a>
						</li>

					</ul>
				</div>

				<div class="option-combo size">
					<ul class="filter option-set clearfix " data-filter-group="size">
						<li>
							<a href="#filter-size-any" data-filter-value="" class=".any">any</a>
						</li>
						<li>
							<a href="#filter-profile-akt" data-filter-value=".akt">akt</a>

						</li>
						<li>
							<a href="#filter-profile-sima" data-filter-value=".sima">sima</a>

						</li>

					</ul>
				</div>
			</section>
			<!-- #options -->

			<script>
				$(function() {
					var $container = $('#container'), filters = {};

					$container.isotope({
						itemSelector : '.galeryimg',
						masonry : {
							columnWidth : 60
						}
					});

					// filter buttons
					$('.filter a').click(function() {
	alert("asd");						
						var $this = $(this);
						// don't proceed if already selected
						if ($this.hasClass('selected')) {
							return;
						}

						var $optionSet = $this.parents('.option-set');
						// change selected class
						$optionSet.find('.selected').removeClass('selected');
						$this.addClass('selected');

						// store filter value in object
						// i.e. filters.color = 'red'
						var group = $optionSet.attr('data-filter-group');
						filters[group] = $this.attr('data-filter-value');
						// convert object into array
						var isoFilters = [];
						for (var prop in filters ) {
							isoFilters.push(filters[prop])
						}
						var selector = isoFilters.join('');
						$container.isotope({
							filter : selector
						});

						return false;
					});

				});
			</script>

		</section>
		<div id="footer">
			
		</div>

	</body>
</html>
